<template>
    <section class="form-container">
        <div class="form-filter">
            <div style="margin-bottom: 15px;">
                线路段：{{ lineSectionName }}
            </div>
            <el-form :inline="true" :model="filter" class="demo-form-inline">
                <el-form-item label="车型" prop="vihicleTypeId">
                    <el-select
                        v-model="filter.vihicleTypeId"
                        filterable
                        placeholder="请选择"
                        @change="getList()"
                        style="width:300px;"
                    >
                        <el-option
                            v-for="item in vehicleTypeOptions"
                            :key="item.id"
                            :label="item.vehicleTypeName"
                            :value="item.id"
                        />
                    </el-select>
                </el-form-item>
            </el-form>
        </div>
        <div class="form-content">
            <div style="margin-bottom:10px; display:flex; ">
                <el-input placeholder="请输入价格" v-model="batchPrice" style="width:300px;">
                  <el-button @click="batchSet" slot="append">批量设置</el-button>
                </el-input>
                <el-popconfirm :title="'确认保存吗？'" @onConfirm="submitForm(this)">
                    <el-button slot="reference" type="primary" style="margin-left:15px;">保存</el-button>
                </el-popconfirm>
            </div>
            <el-table
                v-loading="loading"
                style="width: 100%"
                :data="dataList"
                border
                stripe
                :header-cell-style = "headerCellStyle"
            >
                <el-table-column label="序号" width="60">
                    <template #default="scope">
                        {{ scope.$index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column prop="vehicleTypeSeatId" label="车型座位ID"/>
                <el-table-column prop="seatName" label="座位名称"/>
                <el-table-column prop="seatPrice" label="价格">
                    <template #default="scope">
                        <el-input v-model="scope.row.seatPrice" size="small" v-if="!scope.row.isDriverSeat"  />
                    </template>
                </el-table-column>

                <el-table-column prop="row" label="第几排"/>
                <el-table-column prop="col" label="第几列"/>
                <el-table-column prop="saleTicketType" label="售票类型">
                    <template #default="scope">
                        <el-tag :type="scope.row.saleTicketTypeStyle">
                            {{ scope.row.saleTicketTypeName }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="座位状态" width="80px">
                    <template #default="scope">
                        <el-tag :type="scope.row.statusStyle">
                            {{ scope.row.statusName }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="isDriverSeat" label="司机位">
                    <template #default="scope">
                        <el-tag v-if="scope.row.isDriverSeat">是</el-tag>
                        <el-tag v-else type="info">否</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="isNearWindow" label="靠窗">
                    <template #default="scope">
                        <el-tag v-if="scope.row.isNearWindow">是</el-tag>
                        <el-tag v-else type="info">否</el-tag>
                    </template>
                </el-table-column>

                <el-table-column prop="isSafetyDoorFront" label="安全门前排">
                    <template #default="scope">
                        <el-tag v-if="scope.row.isSafetyDoorFront">是</el-tag>
                        <el-tag v-else type="info">否</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="isSafetyDoorBehind" label="安全门后排">
                    <template #default="scope">
                        <el-tag v-if="scope.row.isSafetyDoorBehind">是</el-tag>
                        <el-tag v-else type="info">否</el-tag>
                    </template>
                </el-table-column>

                <el-table-column prop="updateName" label="更新人"/>
                <el-table-column prop="updateTime" label="更新时间" width="160"/>
            </el-table>
        </div>
    </section>
</template>
<script>
import {LineSectionSeatApi} from '@/api/intercity/LineSectionSeatApi'
import {LineGroupApi} from '@/api/intercity/LineGroupApi'
    import {
        Common
    } from '@/utils/common'

export default {
    name: 'lineSectionSeatList',
    components: {},
    data() {
        return {
            dataList: [],

            lineGroupId: 0,
            lineSectionId: 0,
            lineSectionName: '',

            filter: {vihicleTypeId: 0},
            vehicleTypeOptions: [],
            loading: false,
            headerCellStyle:{
                "background-color":"#F2F5FC"
            },
            batchPrice:'',

            currentUrl:''
        }
    },
    created() {
        this.refresh()
    },
    watch:{
        $route(to,from){
            if(to.name=="lineSectionSeatList" && this.currentUrl != location.href){
                this.refresh()
                this.currentUrl = location.href
            }
        }
    },
    methods: {
        refresh(){
            this.lineGroupId = this.$router.currentRoute.query.lineGroupId
            this.lineSectionId = this.$router.currentRoute.query.lineSectionId
            this.lineSectionName = this.$router.currentRoute.query.lineSectionName

            this.getVehicleTypeListByLineGroupId()
        },
        getVehicleTypeListByLineGroupId() {
            LineGroupApi.getVehicleTypeListByLineGroupId(this.lineGroupId).then((data) => {
                this.vehicleTypeOptions = data
                this.filter.vihicleTypeId = data[0].id
                this.getList()
            })
        },

        // 获取座位列表
        getList() {
            this.loading = true
            LineSectionSeatApi.getList(this.lineSectionId, this.filter.vihicleTypeId).then((response) => {
                response.forEach(function(item){
                    item.seatPrice = item.seatPrice/100
                })
                this.dataList = response
                this.loading = false
            })
        },

        submitForm() {
            let data = Common.deepClone(this.dataList)
            data.forEach(function(item){
                item.seatPrice = item.seatPrice*100
            })
            LineSectionSeatApi.update(data).then((response) => {
                this.getList()
            })
        },

        batchSet(){
            let that = this
            if(that.batchPrice > 0){
                that.dataList.forEach(function(item){
                    that.$set(item, 'seatPrice', that.batchPrice)
                })
            }
        },
    }
}

</script>

<style lang="scss" scoped></style>
